<template>
  <view class="base-dialog">
    <u-popup :round="10" :show="show" @close="close">
      <view class="base-dialog-header">
        <view class="base-dialog-header-left" @click.stop="() => show = false">关闭</view>
        <view class="base-dialog-header-title">{{ title }}</view>
      </view>
      <view class="base-dialog-content">
        <slot :close="() => close()"/>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    title: {type: String, default: '提示'}
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.base-dialog {
  .base-dialog-header {
    display: flex;
    padding: 10rpx;
    margin: 1em 0;
    font-size: 30rpx;

    .base-dialog-header-left {
      color: #a9a9a9;
      margin-left: 1em;
      width: 3em;
    }

    .base-dialog-header-title {
      width: calc(100% - 8em);
      font-weight: bold;
      text-align: center;
    }
  }

  .base-dialog-content {
    padding: 20rpx;
  }
}
</style>
